<template>
  <div style="padding: 10px;">
    <Row class="addHeader">
      <Col span="1">
      <router-link to="/washList">
        <Icon type="ios-arrow-left" size=30></Icon>
      </router-link>
      </Col>
      <Col span="22">
      <p>新增洗衣模式</p></Col>
    </Row>

    <Row class="formBox">
      <Col span="24">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="labelWidth">
        <Row>
          <Col span="10" offset="6">
          <FormItem label="名称:" prop="mode_name">
            <Input v-model="formValidate.mode_name" placeholder="请输入名称"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="10" offset="6">
          <FormItem label="价格:" prop="mode_price">
            <Input v-model="formValidate.mode_price" placeholder="请输入价格"></Input>
          </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span="10" offset="6">
          <FormItem label="时间:" prop="mode_duration">
            <Input v-model="formValidate.mode_duration" placeholder="请输入洗衣时间"></Input>
          </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span="10" offset="6">
          <FormItem label="Icon:" prop="mode_icon">
            <Input  v-model="formValidate.mode_icon" placeholder="请输入"></Input>
          </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span="10" offset="6">
          <FormItem label="纬度:" prop="device_mode">
            <Input  v-model="formValidate.device_mode" placeholder="请输入设备模式"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="10" offset="6">
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
          </Col>
        </Row>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {PriceApi} from "../../../static/api/api";

  export default {
    data() {
      return {
        labelWidth: '200',

          formValidate: {
              mode_name: '',
              mode_price: '',
              mode_duration: '',
              mode_icon: '',
              device_mode: ''
        },
        ruleValidate: {
            mode_name: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ],
            mode_price: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ],
            mode_duration: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ],
            mode_icon: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ],
            device_mode: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ]
        }

      }
    },
    mounted: {},
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {

            var formdata = {
              name: this.formValidate.mode_name,
                price: this.formValidate.mode_price,
                duration: this.formValidate.mode_duration,
                icon: this.formValidate.mode_icon,
                deviceMode: this.formValidate.device_mode
            };

            PriceApi.priceAdd(formdata).then(res => {
              this.$Message.success('Success!');
              this.$router.push({path: '/priceList'})
              /*if(res.status ==200){

              }*/
            }).catch(err => {
              this.$Message.error('添加失败!');
            })
          } else {
            this.$Message.error('验证失败!');
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    }
  }
</script>
<style>
  .addHeader {
    height: 47px;
    border-bottom: 1px dashed #efefef;
  }

  .addHeader p {
    font-size: 20px;
    color: #666666;
    text-align: center;
  }

  .formBox {
    padding-top: 20px;
  }

  .ivu-form-item-label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #495060;
    line-height: 1;
    padding: 10px 12px 10px 0;
    box-sizing: border-box;
    font-weight: 600 !important;
  }

  .roleInfo_body p {
    text-align: center;
    padding-top: 3%;
  }

  .roleInfo_body p.p_role_top {
    text-align: center;
    padding-top: 10% !important;
  }

  .roleInfo_body h6 {
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 80px !important;
  }

  .roleInfo_line p {
    vertical-align: middle
  }


</style>
